Assets Management

Catalyst provides comprehensive asset management capabilities for handling static files, custom fonts, and other resources with automatic optimization and caching strategies.

Folder Structure

Organize your static assets in the static directory

Folder Structure

static/
├── css/
│   ├── custom.css
│   └── fonts.css
├── images/
│   ├── logo.png
│   ├── hero-bg.jpg
│   └── icon.svg
├── fonts/
│   ├── Inter-Regular.woff2
│   ├── Inter-Bold.woff2
│   └── Roboto-Regular.woff2
└── documents/
    ├── manual.pdf
    └── data.json

CSS Font Loading

Define custom fonts with optimal loading strategies

static/css/fonts.css

/* static/css/fonts.css */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Usage in Components

Import and use static assets in your React components

Component Example

// In your component
import logo from '/assets/images/logo.png';
import customFont from '/assets/css/fonts.css';

function MyComponent() {
  return (
    <div style={{ fontFamily: 'Inter, sans-serif' }}>
      <img src={logo} alt="Logo" />
      <h1>Styled with custom font</h1>
    </div>
  );
}

Asset Optimization

Catalyst automatically optimizes your assets for better performance:

Image Optimization

• Automatic WebP Conversion: Modern browsers receive WebP format
• Responsive Image Sizing: Multiple sizes for different screen densities
• Lazy Loading: Images load only when needed
• Compression: Automatic quality optimization

Caching Strategy

• Long-term Caching: Static assets cached for extended periods
• Cache Busting: Automatic cache invalidation on updates
• CDN Integration: Ready for content delivery networks
• ETags: Efficient cache validation

Best Practices

1. Use Appropriate Formats: Choose the right format for each asset type
2. Optimize File Sizes: Compress images and fonts before adding
3. Organize Structure: Keep assets well-organized in subdirectories
4. Version Control: Exclude large assets from Git, use CDN for production
5. Monitor Performance: Track asset loading times and sizes